<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view>
		<ksp-cropper mode="fixed" :width="selFileW" :height="selFileH" :url="fileUrl" @cancel="oncancel"
			@ok="onok"></ksp-cropper>
		<view class="gaps">

		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				基本信息
			</view>
			<view class="panel-body">
				<uni-list>
					<uni-list-item title="店铺名字">
						<template v-slot:footer>
							<view class="shop-right">
								{{shopInfo.shopName}}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item showArrow :clickable="true" @click="changeLogo">
						<template v-slot:header>
							<view class="shop-left">
								店铺LOGO
							</view>
						</template>
						<template v-slot:footer>
							<image class="slot-image" :src="shopInfo.logoUrl || '/static/logo.png'" mode="aspectFill">
							</image>
						</template>
					</uni-list-item>
					
					<uni-list-item title="营业时间" showArrow :clickable="true" @click="changeRunTime">
						<template v-slot:footer>
							<view class="shop-right">
								{{runTime}}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="电话" showArrow :clickable="true" @click="changePhone">
						<template v-slot:footer>
							<view class="shop-right">
								{{shopInfo.phone || ''}}
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="gaps">

		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				店铺介绍
			</view>
			<view class="panel-body" @click="changeIntro">
				{{shopInfo.introduce || '点击修改'}}
			</view>
		</view>
		<view class="gaps">

		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				店铺背景
			</view>
			<view class="panel-body">
				<template v-if="bgImages.length > 0">
					<view class="bg-images-area">
						<image class="bg-image" :src="item || ''" mode="aspectFill" v-for="item in bgImages" :key="item"
							@click="changeBgImage(item)">
						</image>
					</view>
				</template>
				<template v-else>
					<text @click="changeBgImage('')">点击添加</text>
				</template>
			</view>
		</view>
		<view class="gaps">
		
		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				分享店铺图片
			</view>
			<view class="panel-body" >
				<template v-if="shopInfo.shareUrl">
					<image class="share-image" :src="shopInfo.shareUrl || ''" mode="aspectFill" @click="changeShareImage"></image>
				</template>
				<template v-else>
					<text @click="changeShareImage">点击添加</text>
				</template>
			</view>
		</view>
		<view class="gaps">

		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				店铺地址
			</view>
			<view class="panel-body" @click="changeAddress">
				{{shopInfo.address || '点击修改'}}
			</view>
		</view>
		<view class="gaps">
		
		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				首页推荐菜品(最多3个)
			</view>
			<view class="panel-body">
				<template v-if="recommImgs.length > 0">
					<view class="tuijian-image-area">
						<image class="tuijian-image" :src="item || ''" mode="aspectFill" v-for="item in recommImgs" :key="item"
							@click="changeRecommImage(item)">
						</image>
					</view>
				</template>
				<template v-else>
					<text @click="changeRecommImage('')">点击添加</text>
				</template>
			</view>
		</view>
		<view class="gaps">

		</view>

		<view class="sq-panel">
			<view class="panel-tip">
				其他信息
			</view>
			<view class="panel-body">
				<uni-list>
					<uni-list-item title="消费折返(%)" showArrow :clickable="true" @click="changeZk">
						<template v-slot:footer>
							<view class="shop-right">
								{{shopInfo.fxzk || 0}}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="首单奖励(元)" :right-text="shopInfo.reward || 0" showArrow :clickable="true"
						@click="changeReward">
						<template v-slot:footer>
							<view class="shop-right">
								{{shopInfo.reward || 0}}
							</view>
						</template>
					</uni-list-item>
					<!-- <uni-list-item title="付款模式" showArrow :clickable="true" @click="payModeClick">
						<template v-slot:footer>
							<view class="shop-right">
								{{payModelText(shopInfo.payModel)}}
							</view>
						</template>
					</uni-list-item> -->
					<uni-list-item title="营业状态" showArrow :clickable="true" @click="shopStatusClick">
						<template v-slot:footer>
							<view class="shop-right">
								{{shopStatus(shopInfo.state)}}
							</view>
						</template>
					</uni-list-item>
				</uni-list>

			</view>
		</view>
		


		
		
		<view class="gaps">

		</view>
		<uni-popup ref="selTimePop" type="bottom" :is-mask-click="false">
			<smh-time-range :time="['00','00','0','00','00']" @confrim="confrimSelect"
				@cancel="cancelSelect">点击选择</smh-time-range>
		</uni-popup>

		<uni-popup ref="dialogPopup" type="dialog">
			<uni-popup-dialog mode="input" :title="title" :duration="2000" @confirm="editConfirm">
				<uni-easyinput type="textarea" v-model="content" :placeholder="tip" class="input-style"
					maxlength="100"></uni-easyinput>
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getMyShop,
		editZk,
		editReward,
		editUseTabale,
		editPayModel,
		editLogo,
		editBgImage,
		editIntro,
		editAddress,
		editRunTime,
		editPhone,
		editShopStatus,
		editShareUrl,
		editRecommended
	} from '@/api/shops/shopSetting/shopSetting.js'
	import uploadFile from '@/utils/uploadFile.js'
	export default {
		data() {
			return {
				shopId: '',
				shopInfo: {},
				fileUrl: '',
				show: false,
				runTime: '',
				selFileW: 1000,
				selFileH: 1000,
				changeImg: 'logo',
				bgImages: [],
				bgEdit: '',
				recommEdit:'',
				recommImgs:[],

				content: '',
				tips: '',
				title: '',
				editType: ''
			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.init()
		},
		methods: {
			init() {
				getMyShop().then(res => {
					this.shopInfo = res
					if (this.shopInfo.openTime) {
						this.runTime = this.shopInfo.openTime + '-' + this.shopInfo.closeTime
					} else {
						this.runTime = ''
					}
					if (this.shopInfo.bgimgeUrl) {
						this.bgImages = this.shopInfo.bgimgeUrl.split(',')
					}
					if(this.shopInfo.recommendedUrl) {
						this.recommImgs = this.shopInfo.recommendedUrl.split(',')
					}
				})
			},
			payModelText(val) {
				if (val == 1) return '预付款'
				else if (val == 2) return '后付款'
				else return ''
			},
			shopStatus(val) {
				if (val == 1) return '营业中'
				else if (val == 2) return '打烊'
				else return ''
			},
			async changeBgImage(itemUrl) {
				let _this = this
				uni.showActionSheet({
					itemList: itemUrl !== '' ? ['修改', '添加', '删除'] : ['添加'],
					success: (res) => {
						if (itemUrl === '') {
							this.bgEdit = ''
						} else {
							if (res.tapIndex == 0) {
								this.bgEdit = itemUrl
							} else if (res.tapIndex == 1) {
								this.bgEdit = ''
							} else {
								return uni.showModal({
									title: '确定删除?',
									success: async (del) => {
										if (del.confirm) {
											let imgs = _this.bgImages.filter(m => m != itemUrl)
											let timgs = imgs.join(',')
											uni.showLoading({
												title: '删除中'
											})
											await editBgImage({
												bgImageUrl: timgs
											})
											_this.bgImages = imgs
											uni.hideLoading()
										}
									}
								})
							}
						}
						uni.chooseImage({
							count: 1,
							success: (res) => {
								this.selFileW = 2200
								this.selFileH = 1000
								this.changeImg = 'bg'
								this.fileUrl = res.tempFilePaths[0];
							}
						})
					}
				})
			},
			async changeRecommImage(itemUrl) {
				let _this = this
				uni.showActionSheet({
					itemList: itemUrl !== '' ? ['修改', '添加', '删除'] : ['添加'],
					success: (res) => {
						if (itemUrl === '') {
							if(this.recommImgs.length > 2) {
								return uni.showToast({
									icon:'none',
									title: '最多三个推荐'
								});
							}
							this.recommEdit = ''
						} else {
							if (res.tapIndex == 0) {
								this.recommEdit = itemUrl
							} else if (res.tapIndex == 1) {
								if(this.recommImgs.length > 2) {
									return uni.showToast({
										icon:'none',
										title: '最多三个推荐'
									});
								}
								this.recommEdit = ''
							} else {
								return uni.showModal({
									title: '确定删除?',
									success: async (del) => {
										if (del.confirm) {
											let imgs = _this.recommImgs.filter(m => m != itemUrl)
											let timgs = imgs.join(',')
											uni.showLoading({
												title: '删除中'
											})
											await editRecommended({
												recommendedUrl: timgs
											})
											_this.recommImgs = imgs
											uni.hideLoading()
										}
									}
								})
							}
						}
						uni.chooseImage({
							count: 1,
							success: (res) => {
								this.selFileW = 1000
								this.selFileH = 1000
								this.changeImg = 'recommended'
								this.fileUrl = res.tempFilePaths[0];
							}
						})
					}
				})
			},

			changeLogo() {
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						this.selFileW = 1000
						this.selFileH = 1000
						this.changeImg = 'logo'
						this.fileUrl = res.tempFilePaths[0];
					}
				});
			},
			changeShareImage() {
				let _this = this
				if(this.shopInfo.shareUrl) {
					uni.showModal({
						title:'确定修改?',
						success(r) {
							if(r.confirm) {
								uni.chooseImage({
									count: 1, //默认9
									success: (res) => {
										_this.selFileW = 2000
										_this.selFileH = 1600
										_this.changeImg = 'share'
										_this.fileUrl = res.tempFilePaths[0];
									}
								});
							}
						}
					})
				} else {
					uni.chooseImage({
						count: 1, //默认9
						success: (res) => {
							this.selFileW = 2000
							this.selFileH = 1600
							this.changeImg = 'share'
							this.fileUrl = res.tempFilePaths[0];
						}
					});
				}
			},
			oncancel() {
				this.fileUrl = ''
			},
			async onok(ev) {
				try {
					this.fileUrl = "";
					uni.showLoading({
						title: '上传中',
						mask: true
					})
					if (this.changeImg == 'logo') {
						let res = await uploadFile(ev.path, `${this.shopId}/logo/`)
						let r = await editLogo({
							logoUrl: res.fileUrl
						})
						this.shopInfo.logoUrl = res.fileUrl
					} else if (this.changeImg == 'bg') {
						let res = await uploadFile(ev.path, `${this.shopId}/bg/`)
						if (!this.bgEdit) {
							// 添加
							this.bgImages.push(res.fileUrl)
						} else {
							this.bgImages = this.bgImages.map(item => {
								if (item === this.bgEdit) {
									return res.fileUrl
								}
								return item
							})
						}
						let imgs = this.bgImages.join(',')
						let r = await editBgImage({
							bgImageUrl: imgs
						})
						this.shopInfo.bgimgeUrl = imgs
					} else if(this.changeImg === 'share') {
						let res = await uploadFile(ev.path, `${this.shopId}/share/`)
						let r = await editShareUrl({
							shareUrl: res.fileUrl
						})
						this.shopInfo.shareUrl = res.fileUrl
					} else if(this.changeImg == 'recommended') {
						let res = await uploadFile(ev.path, `${this.shopId}/recommended/`)
						if (!this.recommEdit) {
							// 添加
							this.recommImgs.push(res.fileUrl)
						} else {
							this.recommImgs = this.recommImgs.map(item => {
								if (item === this.recommEdit) {
									return res.fileUrl
								}
								return item
							})
						}
						let imgs = this.recommImgs.join(',')
						let r = await editRecommended({
							recommendedUrl: imgs
						})
						this.shopInfo.recommendedUrl = imgs
					} else {
						return uni.showToast({
							icon: 'none',
							title: '提供错误信息'
						})
					}
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				} finally {
					uni.hideLoading()
				}
			},

			changeIntro() {

				this.content = this.shopInfo.introduce;
				this.tips = '修改介绍';
				this.title = '修改介绍(100字以内)';
				this.editType = 'intro';
				this.$refs.dialogPopup.open();
			},
			editConfirm() {
				if (this.editType === "intro") {
					editIntro({
						intro: this.content
					}).then((r) => {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						this.shopInfo.introduce = this.content
					})
				} else if (this.editType === "address") {
					editAddress({
						address: this.content
					}).then((r) => {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						this.shopInfo.address = this.content
					})
				}
			},

			changeRunTime() {
				this.$refs.selTimePop.open()
				this.show = true
			},
			confrimSelect(e) {
				let _this = this
				let times = e.time.split('-')
				editRunTime({
					start: times[0],
					end: times[1]
				}).then((res) => {
					_this.runTime = e.time
				}).finally(() => {
					_this.$refs.selTimePop.close();
					_this.show = false
				})

			},
			cancelSelect() {
				this.show = false
				this.$refs.selTimePop.close()
			},
			changeAddress() {
				let _this = this
				this.content = this.shopInfo.address;
				this.tips = '修改地址';
				this.title = '修改地址(100字以内)';
				this.editType = 'address';
				this.$refs.dialogPopup.open();
			},
			changePhone() {
				let _this = this
				uni.showModal({
					title: '店铺电话',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							let phone = res.content;
							let p = /^(?:(?:\+|00)86)?1[3-9]\d{9}$|^(?:(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/
							if (p.test(phone)) {
								editPhone({
									phone: phone
								}).then((res) => {
									_this.shopInfo.phone = phone
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '请输入正确的电话'
								})
							}
						}
					}
				})
			},
			changeZk() {
				let _this = this
				uni.showModal({
					title: '店铺折扣',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							let zk = res.content;
							if (!isNaN(zk)) {
								if (zk < 0 || zk > 100) {
									uni.showToast({
										icon: 'none',
										title: '折扣应在0-100之间'
									})
								} else {
									editZk({
										zk: zk
									}).then((res) => {
										uni.showToast({
											icon: 'none',
											title: '修改成功'
										})
										_this.shopInfo.fxzk = zk
									})
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: '折扣在0-100之间'
								})
							}
						}
					}
				})
			},
			changeReward() {
				let _this = this
				uni.showModal({
					title: '首单奖励',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							let reward = res.content;
							if (!isNaN(reward)) {
								editReward({
									reward: reward
								}).then((res) => {
									uni.showToast({
										icon: 'none',
										title: '修改成功'
									})
									_this.shopInfo.reward = reward
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '首单奖励应填数字'
								})
							}
						}
					}
				})
			},
			payModeClick() {
				let _this = this
				uni.showActionSheet({
					itemList: ["预付款", "后付款"],
					success: function(res) {
						if (_this.shopInfo.payModel != res.tapIndex + 1) {
							editPayModel({
								payModel: res.tapIndex + 1
							}).then((r) => {
								_this.shopInfo.payModel = res.tapIndex + 1
							})
						}
					}
				})
			},
			shopStatusClick() {
				let _this = this
				uni.showActionSheet({
					itemList: ["营业", "打烊"],
					success: function(res) {
						if (_this.shopInfo.state != res.tapIndex + 1) {
							editShopStatus({
								state: res.tapIndex + 1
							}).then((r) => {
								_this.shopInfo.state = res.tapIndex + 1
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop-left {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.slot-image {
		width: 40px;
		height: 40px;
	}

	.bg-images-area {
		display: flex;
		flex-direction: column;

	}

	.bg-image {
		width: 400px;
		height: 100px;
		margin-bottom: 10px;
	}
	
	
	.tuijian-image-area{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 5px;
		grid-template-rows: auto;
		
		.tuijian-image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.shop-right-long {
		margin-left: 10px;
	}

	.input-style {
		// border: 1px solid red;
	}
</style>